<style>
</style>

<template>
    <div class="table">
        <div class="table-header">
             <Row>
                <Col span="12">
                    <Button type="error" icon="android-remove" @click="multiRemove">批量删除</Button>
                    <Button type="success" icon="android-add" @click="showAddModal">添加题目</Button>
                    <Button type="success" icon="ios-upload-outline" @click="showImport = true">批量导入试题</Button>
                </Col>
                <Col span="12">
                    <div style="float:right;">
                        <Select v-model="typeSelected" style="width: 255px" multiple placeholder="按题目类型筛选" @on-change="getListByType">
                            <Option v-for="item in typeList" :value="item.type" :key="item.type">{{item.name}}</Option>
                        </Select>
                        <Input v-model="keywords" placeholder="请输入..." style="width: 150px"></Input>
                        <Button type="ghost" icon="ios-search">搜索</Button>
                    </div>
                </Col>
            </Row>
        </div>
        <Table border :columns="columns" :data="list" @on-selection-change="select"></Table>
        <Page :current.sync="page" :total="total_count" :page-size="limit" @on-change="getList" show-total show-elevator :style="{'text-align': 'center'}"></Page>

        <Modal v-model="showAdd" title="添加题目" :mask-closable="false">
            <add ref="AddModal" @closeAdd="closeAddModal"></add>
            <div slot="footer"></div>
        </Modal>
        <Modal v-model="showEdit" title="编辑题目" :mask-closable="false">
            <edit ref="EditModal" @closeAdd="closeEditModal"></edit>
            <div slot="footer"></div>
        </Modal>
        <Modal v-model="showImport" title="批量导入试题">
            <bulk-import ref="ImportModal" @closeImport="closeImportModal"></bulk-import>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script>
import http from '../../../libs/http';
import add from './add';
import edit from './edit';
import bulkImport from './bulkImport';
export default {
    components: {
        add,
        edit,
        bulkImport
    },
    data () {
        return {
            typeSelected: [],
            typeList: [
                {
                    type: 1,
                    name: '单选题'
                },
                {
                    type: 2,
                    name: '多选题'
                },
                {
                    type: 3,
                    name: '判断题'
                },
            ],
            showAdd: false,
            showEdit: false,
            showImport: false,
            list: [],
            limit: 15,
            page: 1,
            total_count: 0,
            keywords: '',
            check_ids: [],
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center',
                },
                /* {
                    title: 'ID',
                    key: 'id',
                    align: 'center',
                    width: '5%'
                }, */
                {
                    title: '题目类型',
                    key: 'question_type',
                    align: 'center',
                    width: '7%',
                    render: (h, params) => {
                        switch (params.row.question_type) {
                            case 1:
                                return '单选题';
                                break;
                            case 2:
                                return '多选题';
                                break;
                            case 3:
                                return '判断题';
                                break;
                        }
                    }
                },
                {
                    title: '问题',
                    key: 'question'
                },
                {
                    title: '选项A',
                    key: 'choice_a',
                    align: 'center',
                    width: '13%'
                },
                {
                    title: '选项B',
                    key: 'choice_b',
                    align: 'center',
                    width: '13%'
                },
                {
                    title: '选项C',
                    key: 'choice_c',
                    align: 'center',
                    width: '13%'
                },
                {
                    title: '选项D',
                    key: 'choice_d',
                    align: 'center',
                    width: '13%'
                },
                {
                    title: '正确答案',
                    key: 'correct_answer',
                    align: 'center',
                    width: '7%',
                    render: (h, params) => {
                        var str = params.row.correct_answer;
                        if (params.row.question_type != 3) {
                            str = str.replace('0', 'A');
                            str = str.replace('1', 'B');
                            str = str.replace('2', 'C');
                            str = str.replace('3', 'D');
                        } else {
                            str = str.replace('0', '错');
                            str = str.replace('1', '对');
                        }
                        return str;
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    width: '10%',
                    render: (h, params) => {
                        return h('div', [
                            h('Button',{
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        this.edit(params.row.id)
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params.row.id)
                                    }
                                }
                            }, '删除')
                        ])
                    }
                }
            ]
        }
    },
    methods: {
        getList (page) {
            this.page = page;
            var that = this;
            var url = 'admin/test/question/index/page/' + page + '/limit/' + this.limit;
            this.apiGet(url).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    that.list = res.data.list;
                    that.total_count = res.data.total_count;
                }
            })
        },
        getListByType(type) {
            this.page = 1;
            var that = this;
            var url = 'admin/test/question/index/page/1/limit/' + that.limit;
            var data = {
                type: type
            }
            this.apiPost(url,data).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    that.list = res.data.list;
                    that.total_count = res.data.total_count;
                }
            })
        },
        showAddModal () {
            this.showAdd = true;
        },
        closeAddModal () {
            this.showAdd = false;
            this.getList(this.page);
        },
        edit (id) {
            this.showEdit = true;
            this.$refs.EditModal.getQuestion(id);
        },
        closeEditModal () {
            this.showEdit = false;
            this.getList(this.page);
        },
        closeImportModal () {  //关闭导入模态框
            this.showImport = false;
            this.getList(this.page);
        },
        remove(id) {
            this.$Modal.confirm({
                    width: "200",
                    content: '确认是否删除',
                    onOk: () => {
                        this.delete(id);
                    }
                });
        },
        delete(id) {
            var url = 'admin/test/question/delete/';
            this.apiDelete(url,id).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    this.getList(this.page);
                    this.$Message.success(res.msg);
                }
            });
        },
        multiRemove () {  //批量删除前判断
            var length = this.check_ids.length;
            if (length == 0 ) {
                this.$Message.error('请选择要删除的数据');
            } else {
                this.$Modal.confirm({
                    width: "200",
                    content: '确认是否删除',
                    onOk: () => {
                        this.multiDelete();
                    }
                });
            }
        },
        multiDelete() {   //批量删除
            var url = 'admin/test/question/multiDelete';
            var data = {
                ids: this.check_ids
            }
            this.apiPost(url, data).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    this.$Message.success(res.msg);
                    this.getList(this.page);
                }
            })
        },
        select (selection) {  //获取选中的对象
            var obj = [];
            selection.forEach(function(val, index) {
                obj.push(val.id);
            }, this);
            this.check_ids = obj;
            console.log(obj);
        },
    },
    created () {
        this.getList(this.page);
    },
    mixins:[http]
}
</script>
